<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        target属性，用来指定超链接打开的位置
            可选值：
                _self 默认值 在当前页面中打开超链接
                _blank 在一个新的页面中打开超链接
     -->
     <a href="列表.html" target="_blank"></a>
     <br><br>
     <a href="#bottom">去底部</a>

     <br><br>
     <a href="#p3">去第三自然段</a>

     
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p id="p3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam adipisci saepe doloribus dolore modi id voluptate omnis, minima ut nisi a, excepturi debitis libero. Quaerat, sequi aperiam. Optio, sed ducimus.</p>

     <!-- 
         在开发中可以将#作为超链接的路径的占位符使用
      -->
      <a href="#">这是一个新的超链接</a>  

      <br><br>
      <!-- 可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生 -->
      <a href="javascript:;">这是一个新的超链接</a>

      <br><br>
     <!-- 
         可以直接将超链接的href属性设置为#，这样点击超链接以后
             页面不会发生跳转，而是转到当前页面的顶部位置

             可以跳转到页面的指定位置，只需要将href的属性设置 #+目标元素的id属性值

             id属性（唯一不重复的）
                -每一个标签都可以添加一个id属性
                -id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
      -->


      <a id="bottom" href="#">回到顶部</a>

</body>
</html>